<template>
  <view
    v-if="broadcastMsgList.length > 0"
    class="container"
  >
    <swiper
      class="swiper"
      vertical
      circular
      autoplay
    >
      <swiper-item
        v-for="(item, index) in broadcastMsgList"
        :key="index"
        class="barrage-item"
      >
        <image
          class="barrage-image"
          :src="
            item.avatar ||
              'https://cdn-prod.findapet.com.cn/default-avator@2x.png'
          "
        ></image>
        <view class="donate-msg-container">
          <view class="content flex align-center">
            <view class="nickname">{{ item.nickname }}</view>
            给它投喂了{{ item.totalPetRation }}g口粮
          </view>
          <view class="time">{{ item.time }}</view>
        </view>
        <u--image
          src="/static/detail/energy.webp"
          radius="0"
          width="92rpx"
          height="56rpx"
        ></u--image>
        <view class="value">+{{ item.loveValue }}</view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
import { donateListMsg } from '@/api/detail.js';
export default {
  props: {
    petId: {
      type: String,
    },
  },
  data() {
    return {
      broadcastMsgList: [],
    };
  },
  watch: {
    petId: {
      immediate: true, // 立即触发回调函数，即使没有变化
      handler(val) {
        if (val) {
          this.donateListMsg();
        }
      },
    },
  },
  mounted() {},
  methods: {
    async donateListMsg() {
      const { data } = await donateListMsg(this.petId);
      this.broadcastMsgList = data;
      console.log('this.broadcastMsgList', this.broadcastMsgList.length);
      if (this.broadcastMsgList.length < 3) {
        this.broadcastMsgList = this.broadcastMsgList.concat(
          this.broadcastMsgList
        );
      } else {
        this.broadcastMsgList = data || [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 50px !important;
}
.barrage-item {
  /*  margin-top: 10rpx; */
  display: flex;
  align-items: center;
  background-image: linear-gradient(270deg, #00000000 0%, #000000 100%);
  border-radius: 46rpx;
  padding: 12rpx 8rpx;
  box-sizing: border-box;
  opacity: 0.6;
  height: 50px !important;
  .value {
    font-weight: bold;
    font-size: 60rpx;
    color: #ffffff;
  }
  .donate-msg-container {
    margin-left: 4px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .content {
      display: flex;
      align-items: center;
      color: #ffffff;
      font-size: 24rpx;
      .nickname {
        margin-right: 2px;
        font-weight: bold;
      }
    }
    .time {
      opacity: 0.6;
      font-weight: 400;
      font-size: 20rpx;
      color: #ffffff;
    }
  }
  .barrage-image {
    display: inline-block;
    vertical-align: middle;
    width: 72rpx !important;
    height: 72rpx !important;
    margin-right: 12rpx;
    border-radius: 30rpx;
  }
}
</style>
